<template>
	<view>
		<view class="box1">
			<view>业务类型</view>
			<view class="box1_r">{{dat_arr.query01}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view class="fot1">承租人信息</view>
			<view class="box2_1">
				<view class="box2_head">身份证号</view>
				<view class="box2_2">{{dat_arr.query02}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">姓名</view>
				<view class="box2_2">{{dat_arr.query03}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">手机号码</view>
				<view class="box2_2">{{dat_arr.query04}}</view>
			</view>
		</view>
		<view class="box2">
			<view class="fot1">蓝本信息</view>
			<view class="box2_1">
				<view class="box2_head">提交人</view>
				<view class="box2_2">{{dat_arr.odata11}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">车辆所在地</view>
				<view class="box2_2">{{dat_arr.odata12}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">VIN</view>
				<view class="box2_2">{{dat_arr.odata13}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">车型名称</view>
				<view class="box2_2">{{dat_arr.odata14}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">首次上牌时间</view>
				<view class="box2_2">{{dat_arr.odata15}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">租赁期限</view>
				<view class="box2_2">{{dat_arr.odata16}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">行驶里程</view>
				<view class="box2_2">{{dat_arr.odata17}}万公里</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">预售价格</view>
				<view class="box2_2">{{dat_arr.odata18}}万元</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">品牌</view>
				<view class="box2_2">{{dat_arr.odata19}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">车系</view>
				<view class="box2_2">{{dat_arr.odata20}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">年份</view>
				<view class="box2_2">{{dat_arr.odata21}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">车型</view>
				<view class="box2_2">{{dat_arr.odata22}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">是否提交第三方评估</view>
				<view class="box2_2">{{dat_arr.odata38}}</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view class="fot1" style="margin-bottom: 30rpx;">车辆资料</view>
			<view class="box4">
				<view @click="img_b(a21)">
					<image :src="a21" mode=""></image>
					<view>登记证1和2页</view>
				</view>
				<view @click="img_b(a22)">
					<image :src="a22" mode=""></image>
					<view>登记证3和4页</view>
				</view>
				<view @click="img_b(a32)">
					<image :src="a32" mode=""></image>
					<view>登记证5和6页</view>
				</view>
				<view @click="img_b(a23)">
					<image :src="a23" mode=""></image>
					<view>左前45度</view>
				</view>
				<view @click="img_b(a24)">
					<image :src="a24" mode=""></image>
					<view>右前门和AB柱</view>
				</view>
				<view @click="img_b(a25)">
					<image :src="a25" mode=""></image>
					<view>仪表盘</view>
				</view>
				<view @click="img_b(a26)">
					<image :src="a26" mode=""></image>
					<view>左后门含BC柱</view>
				</view>
				<view @click="img_b(a27)">
					<image :src="a27" mode=""></image>
					<view>中控操作台</view>
				</view>
				<view @click="img_b(a28)">
					<image :src="a28" mode=""></image>
					<view>车顶蓬含天窗</view>
				</view>
				<view @click="img_b(a29)">
					<image :src="a29" mode=""></image>
					<view>右后45度</view>
				</view>
				<view @click="img_b(a30)">
					<image :src="a30" mode=""></image>
					<view>车身铭牌</view>
				</view>
				<view @click="img_b(a31)">
					<image :src="a31" mode=""></image>
					<view>发送机舱</view>
				</view>
				<view @click="img_b(odata23)">
					<image :src="odata23" mode=""></image>
					<view>行驶证</view>
				</view>
				<view @click="img_b(odata24)">
					<image :src="odata24" mode=""></image>
					<view>前挡风左下角车架号</view>
				</view>
				<view @click="img_b(odata25)">
					<image :src="odata25" mode=""></image>
					<view>右前45度</view>
				</view>
				<view @click="img_b(odata26)">
					<image :src="odata26" mode=""></image>
					<view>左后45度</view>
				</view>
				
				
			</view>
			<view class="all_btn" @click="sp()">去评估</view>
			<!-- 图片放大 -->
			<bigimg :imgsrc="imgsrc" :imgArr="imgArr" v-if="show" @b_show="b_show"></bigimg>
		</view>
	</view>
</template>

<script>
	import bigimg from '../../component/big_img.vue'
	export default {
		data() {
			return {
				imgArr:[],
				imgsrc:'',
				show:false,
				ind:0,
				ind1:0,
				ind2:0,
				sta:'',
				type:'',
				hunyin:[],
				yewu:[],
				shifou:[],
				a1:'',
				a2:'',
				a3:'',
				a4:'',
				a5:'',
				a6:'',
				a7:'',
				a8:'',
				a9:'',
				a10:'',
				a11:'../../static/55.png',
				a12:'../../static/56.png',
				a13:'../../static/57.png',
				a14:'../../static/58.png',
				a21:'../../static/65.png',
				a22:'../../static/66.png',
				a23:'../../static/67.png',
				a24:'../../static/67.png',
				a25:'../../static/67.png',
				a26:'../../static/67.png',
				a27:'../../static/67.png',
				a28:'../../static/67.png',
				a29:'../../static/67.png',
				a30:'../../static/67.png',
				a31:'../../static/67.png',
				a32:'../../static/67.png',
				odata23:'../../static/65.png',
				odata24:'../../static/67.png',
				odata25:'../../static/67.png',
				odata26:'../../static/67.png',
				
				dat_arr:{}
			}
		},
		components:{bigimg},
		onLoad:function(option) {
			console.log(JSON.parse(option.item),888888)
			this.dat_arr = JSON.parse(option.item)
			// if(this.dat_arr.query11 != '' && this.dat_arr.query11 != null){
			// 	this.a11 = this.dat_arr.query11
			// }
			// if(this.dat_arr.query12 != '' && this.dat_arr.query12 != null){
			// 	this.a12 = this.dat_arr.query12
			// }
			// if(this.dat_arr.query13 != '' && this.dat_arr.query13 != null){
			// 	console.log(this.dat_arr.query13,99999)
			// 	this.a13 = this.dat_arr.query13
			// }
			// if(this.dat_arr.query14 != '' && this.dat_arr.query14 != null){
			// 	this.a14 = this.dat_arr.query14
			// }
			if(this.dat_arr.query25 != '' && this.dat_arr.query25 != null){
				this.a21 = this.dat_arr.query25
				this.imgArr.push(this.dat_arr.query25)
			}
			if(this.dat_arr.query26 != '' && this.dat_arr.query26 != null){
				this.a22 = this.dat_arr.query26
				this.imgArr.push(this.dat_arr.query26)
			}
			if(this.dat_arr.query27 != '' && this.dat_arr.query27 != null){
				this.a23 = this.dat_arr.query27
				this.imgArr.push(this.dat_arr.query27)
			}
			if(this.dat_arr.query28 != '' && this.dat_arr.query28 != null){
				this.a24 = this.dat_arr.query28
				this.imgArr.push(this.dat_arr.query28)
			}
			if(this.dat_arr.query29 != '' && this.dat_arr.query29 != null){
				this.a25 = this.dat_arr.query29
				this.imgArr.push(this.dat_arr.query29)
			}
			if(this.dat_arr.query30 != '' && this.dat_arr.query30 != null){
				this.a26 = this.dat_arr.query30
				this.imgArr.push(this.dat_arr.query30)
			}
			if(this.dat_arr.query31 != '' && this.dat_arr.query31 != null){
				this.a27 = this.dat_arr.query31
				this.imgArr.push(this.dat_arr.query31)
			}
			if(this.dat_arr.query32 != '' && this.dat_arr.query32 != null){
				this.a28 = this.dat_arr.query32
				this.imgArr.push(this.dat_arr.query32)
			}
			if(this.dat_arr.query33 != '' && this.dat_arr.query33 != null){
				this.a29 = this.dat_arr.query33
				this.imgArr.push(this.dat_arr.query33)
			}
			if(this.dat_arr.query34 != '' && this.dat_arr.query34 != null){
				this.a30 = this.dat_arr.query34
				this.imgArr.push(this.dat_arr.query34)
			}
			if(this.dat_arr.query35 != '' && this.dat_arr.query35 != null){
				this.a31 = this.dat_arr.query35
				this.imgArr.push(this.dat_arr.query35)
			}
			if(this.dat_arr.query36 != '' && this.dat_arr.query36 != null){
				this.a32 = this.dat_arr.query36
				this.imgArr.push(this.dat_arr.query36)
			}
			if(this.dat_arr.odata23 != '' && this.dat_arr.odata23 != null){
				this.odata23 = this.dat_arr.odata23
				this.imgArr.push(this.dat_arr.odata23)
			}
			if(this.dat_arr.odata24 != '' && this.dat_arr.odata24 != null){
				this.odata24 = this.dat_arr.odata24
				this.imgArr.push(this.dat_arr.odata24)
			}
			if(this.dat_arr.odata25 != '' && this.dat_arr.odata25 != null){
				this.odata25 = this.dat_arr.odata25
				this.imgArr.push(this.dat_arr.odata25)
			}
			if(this.dat_arr.odata26 != '' && this.dat_arr.odata26 != null){
				this.odata26 = this.dat_arr.odata26
				this.imgArr.push(this.dat_arr.odata26)
			}
		},
		methods: {
			b_show:function(e){
				this.show = e
			},
			img_b:function(e){
				this.imgsrc = 0
				this.imgArr.forEach((item,index)=>{
					if(item == e){
						this.imgsrc = index
					}
				})
				if(this.imgArr != ''){this.show = true}
			},
			sp:function(){
				console.log(JSON.stringify(this.dat_arr))
				uni.navigateTo({
					url:'../clpg_1/clpg_1?item=' + JSON.stringify(this.dat_arr)
				})
			},
		}
	}
</script>

<style>
	.box4>view>image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.box4>view{
		width: 316rpx;
		height: 211rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#666666;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10;
	}
	.box4{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.xing{
		width: 12rpx;
		height: 14rpx;
		margin-right: 15rpx;
	}
	.box3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
		margin: 30rpx 0 40rpx 0;
	}
	.box2_3{
		/* width:64rpx;
		height:54rpx; */
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border:1px solid rgba(153,153,153,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
	.box2_2>input{
		text-align: right;
	}
	.box2_2{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.zxj{
		width: 37rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}
	.box2_head{
		white-space: nowrap;
	}
	.box2_1{
		height: 88rpx;
		border-bottom: 1px solid #EEEDF2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box2{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.line{
		height:20rpx;
		background:rgba(238,237,242,1);
	}
	.active{
		background:rgba(58,98,255,0.1);
		border:1rpx solid #3A62FF !important;
		border-radius:10rpx;
		color: #3A62FF !important;
	}
	.box1_r>view{
		/* width:86rpx;
		height:44rpx; */
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border:1rpx solid rgba(153,153,153,1);
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.box1_r{
		display: flex;
		justify-content:flex-start;
		align-items: center;
	}
	.box1{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
